import './style.css'
import * as THREE from 'three';
import WebGL from 'three/addons/capabilities/WebGL.js';


/* 场景 */
const scene = new THREE.Scene();
/* 透视摄像机 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

/* 渲染器 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 材质 
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 网格 
const cube = new THREE.Mesh(geometry, material);
// cube.position.x = 2
cube.position.set(0, 0, 0)


//添加到场景
scene.add(cube);

camera.position.x = 2;
camera.lookAt(0, 0, 0)

function animate() {
  requestAnimationFrame(animate);

  // 旋转动画
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}


// webgl兼容性检查
if (WebGL.isWebGLAvailable()) {
  animate();
} else {
  const warning = WebGL.getWebGLErrorMessage();
  document.getElementById('app').appendChild(warning);

}


/* 动态窗口 */
window.addEventListener('resize', function () {
  // 重置浏览器宽高比
  renderer.setSize(this.window.innerWidth, this.window.innerHeight);
  //重置相机宽高比
  camera.aspect = this.window.innerWidth / this.window.innerHeight;
  // 更新相机投影矩阵
  camera.updateProjectionMatrix();
})
